<template>
  <div class="app-container">
    <el-form :model="query" size="small" :inline="true">
      <el-form-item label="时间范围" prop="dateRange">
        <el-date-picker v-model="dateRange" @change="dateRangeChange" type="daterange" value-format="yyyy-MM-dd"
          :picker-options="datePickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getRows">搜索</el-button>
        <el-button type="success" icon="el-icon-download" size="mini" @click="getXlsx">导出</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="rows">
      <el-table-column label="编号" width="100" align="center" prop="userId" />
      <el-table-column label="账号" align="center" prop="userName" />
      <el-table-column label="昵称" align="center" prop="nickName" />
      <el-table-column label="新增代理" align="center" prop="agentCount" />
      <el-table-column label="新增银行商户" align="center" prop="depositShopCount" />
      <el-table-column label="新增代扣商户" align="center" prop="withdrawShopCount" />
      <el-table-column label="入金流水" align="center" prop="depositAmount" />
      <el-table-column label="代扣流水" align="center" prop="withholdingAmount" />
      <el-table-column label="入金分润" align="center" prop="depositSeparate" />
      <el-table-column label="代扣分润" align="center" prop="withholdingSeparate" />
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="query.pageNum" :limit.sync="query.pageSize"
      @pagination="getRows" />
  </div>
</template>
<script>
import { reportPlatform } from '@/api/ecs/report';


export default {
  name: "reportPlatform",
  data() {
    return {
      loading: true,
      dateRange: [],
      exportFilename: '平台数据.xlsx',
      query: {
        startTime: '',
        endTime: '',
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      rows: [],
      datePickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '本周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setDate(start.getDate() - start.getDay());
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '上周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            end.setDate(end.getDate() - end.getDay() - 1);
            start.setDate(end.getDate() - 6);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '本月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setDate(1);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '上月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setDate(1);
            start.setMonth(start.getMonth() - 1);
            end.setDate(0);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    }
  },
  created() {
    this.getRows()
  },
  methods: {
    dateRangeChange() {
      if (this.dateRange) {
        this.query.startTime = this.dateRange[0] + ' 00:00:00'
        this.query.endTime = this.dateRange[1] + ' 23:59:59'
        this.exportFilename = `平台数据${this.dateRange[0]}至${this.dateRange[1]}.xlsx`
      } else {
        this.query.startTime = ''
        this.query.endTime = ''
        this.exportFilename = `平台数据.xlsx`
      }
    },
    getRows() {
      this.loading = true;
      reportPlatform(this.query).then(response => {
        this.rows = response.rows
        this.total = response.total
      }).finally(() => {
        this.loading = false
      })
    },
    getXlsx() {
      this.download('ecs/report/platform', {
        ...this.query
      }, this.exportFilename)
    },
  }
}
</script>
